import React, { Component } from 'react'
import "./Todo.css"
import List from "./List"
import Add from "./Add"
export default class Todo extends Component {
    constructor(props) {
        super(props)

        this.state = {
            list: [{
                id: 1,
                status: 0,
                title: "漩涡鸣人"
            }, {
                id: 2,
                status: 1,
                title: "春野樱"
            }, {
                id: 3,
                status: 1,
                title: "宇智波佐助"
            }, {
                id: 4,
                status: 0,
                title: "旗木卡卡西"
            }],
            
        }
    }
    chenge = (e) => {
        this.setState({
            title: e.target.value
        })
    }
    add = (title) => {
        this.setState(() => {
            return {
                list: [...this.state.list, {
                    id: this.state.list.length + 1,
                    title: this.state.title,
                    status: 0
                }],
                title: ""
            }
        })
    }
    che = (index) => {
        var res = this.state.list
        res[index].status = !res[index].status
        console.log(res);
        this.setState(() => {
            return {
                list: res
            }
        })
    }
    render() {
        return (
            <div>
                <Add list={this.state.list} add={this.add} chenge={this.chenge}/>
               <List list={this.state.list} che={this.che}/>
               
            </div>
        )
    }
}
